<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
        Submit
    </button>
    <button @click.once="doThis">只处理一次</button>

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis">阻止单击事件继续传播</a>

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit">提交事件不再重载页面</form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThis">修饰符可以串联</a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent>只有修饰符</form>

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>

    <div v-on:scroll.passive="onScroll">被动触发</div>

    <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
    <input v-on:keyup.enter="submit">
    <input v-on:keyup.13="submit">
    <input v-on:keyup.f2="submit">
    <input v-on:keyup.alt.67="submit">
    <div v-on:click.ctrl="submit">Do something</div>
    <div v-on:click.left="submit">Do left</div>
    <div v-on:click.right="submit">Do right</div>
    <div v-on:click.middle="submit">Do middle</div>
</div>


<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
    // 可以使用 `v-on:keyup.f1`
    //Vue.config.keyCodes.f1 = 112

    const vm = new Vue({
        el: "#app",
        data: {
            message: "hello vue",
            title: "fa"
        },
        created: function () {

        },
        mounted: function () {

        },
        methods: {
            warn: function (message, event) {
                // 现在我们可以访问原生事件对象
                if (event) {
                    event.preventDefault()
                }
                console.log(event.target.tagName)
                alert(message)
            },
            doThis(event){

                alert("哈哈")
            },
            onScroll(){
                alert("被动触发")
            },
            submit(){
                alert("提交")
            }
        }
    })


</script>
</body>
</html>